<template>
  <!-- AMap示例组件容器 -->
  <div class="card amap-example">
    <!-- 操作按钮区域 -->
    <div class="amap-options">
      <el-button @click="handlerSearch">查询</el-button>
      <el-button @click="handlerStart">开始</el-button>
      <el-button @click="handlerPause">暂停</el-button>
      <el-button @click="handlerResume">继续</el-button>
      <el-button @click="handlerStop">停止</el-button>
    </div>
    <!-- 地图展示区域 -->
    <div class="amap-explore">
      <amap-explore3 ref="amapExploreRef" :opts="opts" />
    </div>
  </div>
</template>

<script setup lang="ts" name="amapExample">
import { ref, reactive } from "vue";
import AmapExplore3 from "@/components/AmapExplore3/index.vue";
import type { MapOptions, PolylineOption, AmapModule } from "@/components/AmapExplore3/interface";
import { data } from "./mock";

/**
 * 地图配置选项
 * @type {MapOptions}
 */
const opts = reactive<MapOptions>({
  center: [116.397428, 39.90923], // 默认中心点坐标
  zoom: 4 // 默认缩放级别
});

/**
 * AMap组件引用
 * @type {Ref<InstanceType<typeof AmapExplore3>>}
 */
const amapExploreRef = ref<InstanceType<typeof AmapExplore3> | null>(null);

/**
 * 折线模块实例
 * @type {Ref<AmapModule|undefined>}
 */
const polylineModules = ref<AmapModule>();

/**
 * 查询并绘制折线
 * @async
 * @returns {Promise<void>}
 */
const handlerSearch = async () => {
  // 随机生成1、2或3类型的折线
  const type = Math.floor(Math.random() * 3) + 1;
  // 绘制多条折线
  const options: PolylineOption[] = [{ ...data[`polyline0${type}`] }];
  // 调用子组件方法绘制折线
  polylineModules.value = await amapExploreRef.value?.drawPolylines(options);

  // 绘制单条折线
  // polylineModule.value = await amapExploreRef.value?.createSinglePolyline(options[0]);
};

const handlerStart = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.start();
  });
  // 单条折线调取方法
  // polylineModule.value.methods.start();
};

/**
 * 暂停所有折线动画
 * @returns {void}
 */
const handlerPause = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.pause();
  });
};

/**
 * 恢复所有折线动画
 * @returns {void}
 */
const handlerResume = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.resume();
  });
};

/**
 * 停止所有折线动画
 * @returns {void}
 */
const handlerStop = () => {
  polylineModules.value?.instance?.forEach(item => {
    item.methods.stop();
  });
};
</script>
<style lang="scss" scoped>
/* 地图示例容器样式 */
.amap-example {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* 操作按钮区域样式 */
.amap-options {
  display: flex;
  flex-direction: column;
}

/* 地图展示区域样式 */
.amap-explore {
  width: calc(100% - 100px);
  height: 100%;
}
</style>
